<style>
    .layui-table-cell .layui-table-sort {
        display: none;
    }

    .import {
        opacity: 0;
        position: absolute;
        width: 69px;
        height: 38px;
        margin-left: -10px;
    }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">客户名称：</label>
                                    <div class="layui-input-inline">
                                        <input name="factoryName" id="factoryName" class="layui-input"
                                               type="text"
                                               placeholder="请输入客户名称" autocomplete="off"/>
                                    </div>
                                </div>
                                <!-- 客户名称 -->

                              <!--  <div class="layui-inline">
                                    <label class="layui-form-label w-auto">采购组织：</label>
                                    <div class="layui-input-inline">
                                        <input name="purchaseTissue" id="purchaseTissue" class="layui-input"
                                               type="text"
                                               placeholder="请输入采购组织" autocomplete="off"/>
                                    </div>
                                </div>
-->
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">客户提货订单编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="takeOrderNumber" id="takeOrderNumber" class="layui-input"
                                               type="text"
                                               placeholder="请输入客户提货订单编号" autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">创建时间：</label>
                                    <div class="layui-input-inline">
                                        <input name="createTime" id="pTime" class="layui-input date-icon" type="text"
                                               placeholder="选择时间" style="width: 200px" readonly/>
                                    </div>
                                    <input name="startCreateTime" id="sTime" type="hidden"/>
                                    <input name="endCreateTime" id="eTime" type="hidden"/>
                                </div>
                            <!--    <div class="layui-inline">
                                    <label class="layui-form-label w-auto">计划接收时间：</label>
                                    <div class="layui-input-inline">
                                        <input id="pTime" class="layui-input date-icon" type="text"
                                               placeholder="选择计划接收时间"
                                               autocomplete="off" readonly/>
                                        <input name="startTime" id="startTime" style="display: none"/>
                                        <input name="endTime" id="endTime" style="display: none"/>
                                    </div>
                                </div>-->
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog"
                                            lay-submit layui-form-keyDownSearch="true">查询
                                    </button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lay-btn-rows">
                    <div class="lay-btn-box">
                        <div class="lay-btn-lt">
                            <button id="addProductionPlan" class="layui-btn icon-btn color-reseda">添加</button>
                            <button id="uploaderInputBut" class="layui-btn icon-btn color-reseda">
                                <input id="uploaderInput" type="file" name="file" class="import" accept=".xls,.xlsx"/>导入
                            </button>
                            <button id="fromLocalWarehouseBtnTemplate" class="layui-btn icon-btn color-green">模板下载</button>
                        </div>
                        <div class="lay-btn-rt">
                        </div>
                    </div>
                </div>

            </div>
            <!-- 表格 -->
            <table class="layui-table" id="requirePlanInfo" lay-filter="requirePlanInfo"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="productPlanningTableBar">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit1">详情</a>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'laytpl', 'tableTreeDj', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;
        var config = layui.config;
        var admin = layui.admin;
        var tableTree = layui.tableTreeDj;

        //时间范围
        laydate.render({
            elem: '#pTime',
            type: 'date',
            range: true,
            done: function (value, date, endDate) {
                if (value) {
                    var dateValue = value.split(" - ");
                    $("#sTime").val(dateValue[0] + " 00:00:00");
                    $("#eTime").val(dateValue[1] + " 23:59:59");
                } else {
                    $("#sTime").val();
                    $("#eTime").val();
                }
            }
        });
        //时间范围
        laydate.render({
            elem: '#pTime',
            type: 'date',
            range: true,
            done: function (value, date, endDate) {
                if (value) {
                    var dateValue = value.split(" - ");
                    $("input[name='startTime']").val(dateValue[0] + " 00:00:00");
                    $("input[name='endTime']").val(dateValue[1] + " 23:59:59");
                } else {
                    $("input[name='startTime']").val("");
                    $("input[name='endTime']").val("");
                }
            }
        });

        // 渲染表格
        var insTb = table.render({
            id: 'requirePlanInfo',
            elem: '#requirePlanInfo',
            url: config.base + 'production/productionPlan/admin/dayTakeGoods/list',
            page: true,
            toolbar: true,
            defaultToolbar: ["filter"],
            cellMinWidth: 100,
            cols: [[
                 {type: 'numbers', title: '序号', align: 'center'}
                ,{field: 'takeRecordNumber', title: '记录编号', align: 'center'}
                ,{field: 'takeOrderNumber', title: '提货订单编号', align: 'center'}
                ,{field: 'saveSource', title: '订单来源', align: 'center'}
                ,{field: 'containedMaterialCount', title: '物料数量', align: 'center'}
                ,{field: 'plantCode', title: '所属客户', align: 'center'}
                ,{field: 'factoryName', title: '采购客户', align: 'center'}
   /*             ,{field: 'auditStatusText', title: '采购组织', align: 'center'}
                ,{field: 'createTime', title: '订单下单时间', align: 'center'}
                ,{field: 'auditPeople', title: '发货物流', align: 'center'}*/
                ,{field: 'creator', title: '添加人', align: 'center'}
                ,{field: 'createTime', title: '添加时间', align: 'center'}
                ,{align: 'center', toolbar: '#productPlanningTableBar', title: '操作', width: 200}
            ]]
        });
        
        //渲染下拉
        form.render('select');
        // 模板下载
        $('#fromLocalWarehouseBtnTemplate').click(function () {
            window.location.href = config.base + "enterprise/order/admin/dayTakeGoods/template";
        });

        // 导入excel
        $('#uploaderInput').on("change", function (e) {
            layer.load(2);
            var formData = new FormData();
            var files = e.target.files;
            let that = $(this);
            formData.append("file", files[0]);
            formData.append("name", files[0].name);//这个地方可以传递多个参数
            $.ajax({
                url: config.base + 'production/productionPlan/admin/dayTakeGoods/importExcel',
                data: formData,
                headers: {Authorization: 'Bearer ' + config.getToken()},
                type: "POST",
                processData: false,
                contentType: false,
                success: function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        layer.closeAll('page');
                        setTimeout(_ => {
                            location.reload()
                        }, 1000);
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                    that.val('');
                }
            });
        });

        // 工具条点击事件
        table.on('tool(requirePlanInfo)', function (obj) {
            let data = obj.data;
            if (obj.event === 'edit1') {  //详情
                showPlanDetailModel(data);
            }else if(obj.event === 'updateRequireDetail'){  //修改
                showEditPlanModel(data);
            }
        });

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}}, 'data');
        });

        // 重置搜索
        form.on('submit(resets)', data => {
            $(".lay-header").find('select').val("");
            $(".lay-header").find('input').val("");
            let field = data.field;
            for (let key in field) {
                field[key] = ''
            }
            insTb.reload({where: field, page: {curr: 1}}, 'data');
        });

        // 添加按钮点击事件
        $('#addProductionPlan').click(function () {
            addProductionPlan();
        });

        // 添加需求计划
        function addProductionPlan() {
            let title = "添加提货订单";
            admin.formOpen({
                type: 1,
                area: ['78%', '84%'],
                style: 'font-size: 20px;',
                title: title,
                path: 'components/product/requirePlan/dayAddTakeGoodsInfo.html',
                end: function (data) {
                    insTb.reload({page: {curr: 1}}, 'data');
                }
            });
        }

        // 添加按钮点击事件
        $('#productPlanningAdd').click(function () {
            showPlanDetailModel();
        });


        // 显示详情弹窗
        function showPlanDetailModel(data) {
            let title = "提货订单详情";
            admin.putTempData("dayTakeGoodsInfoData",data);
            admin.formOpen({
                type: 1,
                area: ['78%', '84%'],
                style: 'font-size: 20px;',
                title: title,
                path: 'components/product/requirePlan/dayTakeGoodsListDetailInfo.html',
                finish: function () {
                    table.reload(insTb, {});
                }
            });
        }


        // 显示编辑弹窗
        function showEditPlanModel(data) {
            let title = "编辑需求计划详情";
            admin.putTempData("dayTakeGoodsInfoData",data);
            admin.formOpen({
                type: 1,
                area: ['78%', '84%'],
                style: 'font-size: 20px;',
                title: title,
                path: 'components/product/requirePlan/requireEditPlanInfo.html',
                finish: function () {
                    table.reload(insTb, {});
                }
            });
        }


    });
</script>